// 用户信息弹窗

<template>
  <div>
    <u-popup border-radius="12" width="auto" v-model="form.show" mode="center">
      <view class="userinfo-cont">
        <!-- 关闭按钮 -->
        <view class="pop-close">
          <text @tap="close" class="iconfont icon-cha"></text>
        </view>
        <view class="pop-bottom">
          <!-- 标题 -->
          <view class="cont-title">请完善个人信息 体验更多功能</view>
          <!-- 头像 -->
          <view class="img-box">
            <button class="img-btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar"></button>
            <image
              :src="formData.avatar || require('@/static/image/avatar2.png')"
              mode="aspectFill"
            />
            <text class="iconfont icon-a-xiangji1"></text>
          </view>
          <!-- 昵称 -->
          <view class="cont-nickname">
            <view class="nick-left">昵 称</view>
            <input
              @change="nickChange"
              @input="nickInpChange"
              v-model="formData.nickname"
              type="nickname"
              placeholder="请输入昵称"
              placeholder-class="input-placeholder"
            />
          </view>
          <!-- 文字 -->
          <view class="cont-text">99%的用户选择微信头像和微信昵称，便于以后沟通</view>
          <!-- 按钮 -->
          <view class="cont-btn" @tap="save"> 立即提交 </view>
        </view>
      </view>
    </u-popup>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      formData: {
        avatar: '',
        nickname: ''
      }
    }
  },
  created() {
    const userInfo = uni.getStorageSync('userInfo')
    this.formData = {
      avatar: userInfo.avatar || '',
      nickname: userInfo.nickname || ''
    }
  },
  methods: {
    chooseAvatar(e) {
      uni.uploadFile({
        url: this.$baseURL + '/api/kuerp/order/common/upload',
        filePath: e.detail.avatarUrl,
        name: 'file',
        header: {
          token: uni.getStorageSync('token')
        },
        success: (uploadFileRes) => {
          this.formData.avatar = JSON.parse(uploadFileRes.data).data.fullurl
        },
        fail: (err) => {
          console.log('上传头像失败')
        }
      })
    },
    // 关闭
    close() {
      this.$emit('close')
    },
    // 输入昵称
    nickInpChange(e) {
      // this.$emit('nickInpChange', e)
    },
    // 输入框改变
    nickChange(e) {
      this.formData.nickname = e.detail.value
      // this.$emit('nickChange', e)
    },
    // 提交
    save() {
      console.log('组件save', this.formData)
      this.$emit('save', this.formData)
    }
  }
}
</script>

<style lang="less" scoped>
.userinfo-cont {
  width: 600rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  // 关闭按钮
  .pop-close {
    position: sticky;
    top: 0;
    width: 100%;
    text-align: right;
    padding-bottom: 8rpx;
    padding-top: 20rpx;
    .iconfont {
      padding-left: 100rpx;
      margin-right: 28rpx;
      font-size: 20rpx;
      color: #cccccc;
    }
  }
  .pop-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0rpx 40rpx 42rpx;
    // 标题
    .cont-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
    // 文字
    .cont-text {
      margin-top: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
    // 昵称
    .cont-nickname {
      margin-top: 40rpx;
      width: 520rpx;
      height: 84rpx;
      background: #f7f8fa;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx 0 28rpx;
      .nick-left {
        height: 84rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        padding-right: 28rpx;
        position: relative;
        &::after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          display: inline-block;
          content: '';
          width: 2rpx;
          height: 24rpx;
          background: rgba(0, 0, 0, 0.06);
        }
      }
      input {
        flex: 1;
        margin-left: 28rpx;
        height: 84rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
      }
    }
    // 头像
    .img-box {
      margin-top: 40rpx;
      width: 124rpx;
      height: 124rpx;
      background: #f7f8fa;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      position: relative;
      .img-btn {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 99;
      }
      image {
        width: 100%;
        height: 100%;
        border-radius: 50px;
      }
      .iconfont {
        position: absolute;
        bottom: 0;
        right: 0;
        color: #fe492f;
        font-size: 24rpx;
      }
    }
    // 按钮
    .cont-btn {
      margin-top: 40rpx;
      width: 100%;
      height: 92rpx;
      background: linear-gradient(90deg, #ff6f37 0%, #fe2722 100%);
      border-radius: 100rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
